<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4-判断用户名是否能注册</title>
    <style type="text/css">
        .box{
            width:600px;
            height:500px;
            margin:30px auto;
        }
        .box p{
            text-align: center;
        }
        i.msg{
            font-style: normal;
        }
    </style>
</head>
<body>
    <div class="box">
        <p><span>用户名：</span><input type="text" name="username" placeholder="请输入用户名" id="username"><i class="msg"></i></p>
        <p><input type="submit" value="注册" id="btn"></p>
    </div>
    <script type="text/javascript">
        //在后端已经注册的用户
        var dbUsers = ['李宝莉','张端阳','樊文卓','王瑞祥'];
        //获取事件源对象
        var oInput = document.getElementById('username');
        //页面加载
        window.onload = function(){
            console.log('over...');
            //失去焦点事件
            oInput.onblur = function(e){
                //alert(oInput.value);
                //如何查找一个元素在数组中呢?
                var isHas = dbUsers.some(function(val,index,arr){
                    return val==oInput.value;
                });
                //判断
                if(isHas){
                    document.querySelector('.msg').innerHTML = '该用户已注册';
                    document.querySelector('.msg').style.color='red';
                }else{
                    document.querySelector('.msg').innerHTML = '恭喜你可以注册';
                    document.querySelector('.msg').style.color='green';
                }
            }

        }
    </script>
</body>
</html>